<script language="JavaScript">
<!--

Images = new Array()
Rollimage = new Array()
var totalImages = 16; 	// Update this when a new production is added

for (i=0; i<totalImages; i++)
{
	Rollimage[i] = new Array(2);
}
	
for (i=0; i<totalImages; i++)
{
	for (j=0; j<2; j++)
	{
		Rollimage[i][j]= new Image(180,255);
	}
}


Rollimage[0][0].src = "images/anaisnin1.jpg"
Rollimage[0][1].src = "images/anaisnin2.jpg"

Rollimage[1][0].src = "images/thesethingshappen1.jpg"
Rollimage[1][1].src = "images/thesethingshappen2.jpg"

Rollimage[2][0].src = "images/steps1.jpg"
Rollimage[2][1].src = "images/steps2.jpg"

Rollimage[3][0].src = "images/threetales1.jpg"
Rollimage[3][1].src = "images/threetales2.jpg"

Rollimage[4][0].src = "images/lesmis1.jpg"
Rollimage[4][1].src = "images/lesmis2.jpg"

Rollimage[5][0].src = "images/gondoliers1.jpg"
Rollimage[5][1].src = "images/gondoliers2.jpg"

Rollimage[6][0].src = "images/mikado1.jpg"
Rollimage[6][1].src = "images/mikado2.jpg"

Rollimage[7][0].src = "images/baby1.jpg"
Rollimage[7][1].src = "images/baby2.jpg"

Rollimage[8][0].src = "images/hero1.jpg"
Rollimage[8][1].src = "images/hero2.jpg"

Rollimage[9][0].src = "images/parade1.jpg"
Rollimage[9][1].src = "images/parade2.jpg"

Rollimage[10][0].src = "images/fame1.jpg"
Rollimage[10][1].src = "images/fame2.jpg"

Rollimage[11][0].src = "images/footloose1.jpg"
Rollimage[11][1].src = "images/footloose2.jpg"

Rollimage[12][0].src = "images/orfeo1.jpg"
Rollimage[12][1].src = "images/orfeo2.jpg"


function SwapOut(element){
	element.src = Rollimage[element.id][1].src;
	return true;
}

function SwapBack(element){
	element.src = Rollimage[element.id][0].src; 
	return true;
}

-->
</script>

<div id="left" style="width: 300px; padding: 50px 0px 0px 0px;">
	<div class="posters">	
	
		<a href="?production=Orfeo">
			<img onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/orfeo1.jpg" id="12" />
		</a>
		
		<a href="?production=Footloose">
			<img class="centre" onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/footloose1.jpg" id="11" />
		</a>
		
		<a href="?production=AnaisNin">
			<img onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/anaisnin1.jpg" id="0" />
		</a>
		
		<a href="?production=TheseThingsHappen">
			<img onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/thesethingshappen1.jpg" id="1" />
		</a>
		
		<a href="?production=Steps">
			<img class="centre" onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/steps1.jpg" id="2" />
		</a>
		
		<a href="?production=ThreeTales">
			<img onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/threetales1.jpg" id="3" />
		</a>
			
		<a href="?production=LesMiserables">
			<img onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/lesmis1.jpg" id="4" />
		</a>
		
		<a href="?production=TheGondoliers">
			<img class="centre" onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/gondoliers1.jpg" id="5" />
		</a>
		
		<a href="?production=TheMikado">
			<img onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/mikado1.jpg" id="6" />
		</a>
		
		<a href="?production=Baby">
			<img onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/baby1.jpg" id="7" />
		</a>
		
		<a href="?production=Hero">
			<img class="centre" onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/hero1.jpg" id="8" />
		</a>
		
		<a href="?production=Parade">
			<img onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/parade1.jpg" id="9" />
		</a>
		
		<a href="?production=Fame">
			<img onmouseover="SwapOut(this)" onmouseout="SwapBack(this)" src="images/fame1.jpg" id="10" />
		</a>
	</div>
</div>

<div id="centre" style="text-align: justify; padding: 55px 0px 0px 0px;">
	<p style="color: #FFFFFF; font-weight: bold; font-style: italic;">Please click on the posters on the left for more information on a selection of Matthew's shows.</p>
	
	<p>In addition to these, Matthew has directed productions of Shakespeare's <b>Romeo and Juliet;</b> 
	Yasmina Reza's <b>Art</b>; Jean Genet's <b>The Maids</b>; an adaptation of Roald Dahl's 
	<b>Charlie and the Chocolate Factory</b>. He worked as movement director on Handel's 
	<b>Semele</b> for <a href="http://www.hgo.org.uk" target="_blank">Hampstead Garden Opera</a>.</p>
	
	<p>Assisting credits include 
	<b>Siegfried</b> (<a href="http://www.operanorth.co.uk" target="_blank">Opera North</a>); 
	<b>Superjohn</b> (<a href="http://www.firehousecreativeproductions.com" target="_blank">Firehouse Creative Productions</a>);
	<b>Manifest Destiny</b> (<a href="http://www.kingsheadtheatre.com/main.html" target="_blank">Opera Up Close</a>);
	<b>Threepenny Opera</b> (<a href="http://www.ram.ac.uk/productions" target="_blank">Royal Academy Opera</a>); 
	<b>The Magic Flute</b> (<a href="http://www.hgo.org.uk" target="_blank">Hampstead Garden Opera</a>); 
	<b>The Mikado</b> (<a href="http://caosweb.org" target="_blank">Cambridge Amateur Operatic Society</a>); 
	<b>The Bartered Bride</b> (<a href="http://www.surreyopera.org" target="_blank">Surrey Opera</a>); 
	<b>Studies for a Portrait</b> (<a href="http://www.kingsheadtheatre.com" target="_blank">Kings Head Theatre</a>); 
	<b>Aladdin</b> (<a href="http://italia-conti.com" target="_blank">Italia Conti Arts Centre</a>); 
	<b>Ariodante</b> (<a href="http://www.chog.co.uk" target="_blank">Cambridge Handel Opera Group</a>); 
	<b>Romeo and Juliet</b> (Swan Theatre Company).</p>
</div>

<div id="right" style="width: 250px;">
	<div class="subtitle">
		<img class="subtitle" src="images/title_work.jpg" alt="Matthew Eberhardt work"/>
		<img id="centreImg" src="images/matt_work.jpg" alt="Matthew Eberhardt director theatre musical opera" style="width: 250px;" />
	</div>
</div>